<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/plugins/layui/css/layui.css">
    <link rel="stylesheet" href="./static/css/login.css">
</head>
<body id="login-page">
<div class="layui-row layui-row-space8">
<div class="layui-col-xs2 layui-col-md4">
    .
</div>


    <div class="layui-col-xs8 layui-col-md4" style="margin: 0 auto;">
        <div class="layui-form" id="login-form">
            <br>
            <br>
        <h1 style="text-align: center">注册账户</h1>
            <br>

            <br>
        <!-- 表单选项 -->
        <form class="layui-form"  style="width: 90%;margin: 0 auto">
            <div class="layui-form-item">
                <!-- 用户名 -->
                <div class="layui-form-item" >
                    <label class="layui-icon layui-icon-username" ></label>
                    <input type="text" id="user" name="username" required  lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-form-item">
                    <i class="layui-icon" id="ri" style="color: green;font-weight: bolder;" hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-form-item">
                    <i class="layui-icon" id="wr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                </div>
            </div>
            <br>

            <!-- <div class="layui-input-inline">
                 &lt;!&ndash; 手机号 &ndash;&gt;
                 <div class="layui-inline" style="width: 85%">
                     <input type="text" id="phone" name="phone" required  lay-verify="required" placeholder="手机号" autocomplete="off" class="layui-input">
                 </div>
                 &lt;!&ndash; 对号 &ndash;&gt;
                 <div class="layui-inline">
                     <i class="layui-icon" id="pr" style="color: green;font-weight: bolder;" hidden></i>
                 </div>
                 &lt;!&ndash; 错号 &ndash;&gt;
                 <div class="layui-inline">
                     <i class="layui-icon" id="po" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                 </div>
             </div>
             <div class="layui-input-inline">
                 &lt;!&ndash; 邮箱 &ndash;&gt;
                 <div class="layui-inline" style="width: 85%">
                     <input type="text" id="email" name="email" required  lay-verify="required" placeholder="邮箱" autocomplete="off" class="layui-input">
                 </div>
                 &lt;!&ndash; 对号 &ndash;&gt;
                 <div class="layui-inline">
                     <i class="layui-icon" id="er" style="color: green;font-weight: bolder;" hidden></i>
                 </div>
                 &lt;!&ndash; 错号 &ndash;&gt;
                 <div class="layui-inline">
                     <i class="layui-icon" id="eo" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                 </div>
             </div>-->
            <!-- 密码 -->
            <div class="layui-form-item">
                <div class="layui-form-item" >
                    <label class="layui-icon layui-icon-password" ></label>
                    <input type="password" id="pwd" name="password" required  lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-form-item">
                    <i class="layui-icon" id="pri" style="color: green;font-weight: bolder;" hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-form-item">
                    <i class="layui-icon" id="pwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                </div>
            </div>
            <!-- 确认密码 -->
            <div class="layui-form-item">
                <div class="layui-form-item" >
                    <label class="layui-icon layui-icon-password" ></label>
                    <input type="password" id="rpwd" name="repassword" required  lay-verify="required" placeholder="请确认密码" autocomplete="off" class="layui-input">
                </div>
                <!-- 对号 -->
                <div class="layui-form-item">
                    <i class="layui-icon" id="rpri" style="color: green;font-weight: bolder;" hidden></i>
                </div>
                <!-- 错号 -->
                <div class="layui-form-item">
                    <i class="layui-icon" id="rpwr" style="color: red; font-weight: bolder;" hidden>ဆ</i>
                </div>
            </div>


            <div class="layui-form-item login-btn" >
                <button type="submit" lay-submit lay-filter="form-register" style="width: 100%" class="layui-btn">注册</button>
            </div>
            <hr  />
            <p ><a href="login.html" class="fl">已有账号？立即登录</a> &nbsp;&nbsp; <a href="javascript:;" class="fr">   忘记密码？</a></p>
        </form>
            </div>
    </div>


<div class="layui-col-xs2 layui-col-md4">
    .
</div>
</div>

<script src="static/plugins/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="static/js/common.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    layui.use(['form','jquery','layer'], function () {
        var form   = layui.form;
        var $      = layui.jquery;
        var layer  = layui.layer;
        //添加表单失焦事件
        //验证表单
        $('#user').blur(function() {
            var user = $(this).val();
            if (user==""){
                $('#wr').removeAttr('hidden');
                $('#ri').attr('hidden','hidden');
                layer.msg('用户名不能为空')
                return;
            }

            //alert(user);
            $.ajax({
                url: 'http://localhost:8080/tourism-user-api/register/checkUsername',
                type:'post',
                dataType:'json',
                xhrFields: {
                    withCredentials: true
                },
                data:{username:user},
                //验证用户名是否可用
                success:function(data){
                    if (data.code==2002) {
                        $('#wr').removeAttr('hidden');
                        $('#ri').attr('hidden','hidden');
                        layer.msg(data.msg)

                    } else {
                        $('#ri').removeAttr('hidden');
                        $('#wr').attr('hidden','hidden');

                    }

                }
            })
        });
        //alert(phone);
        $('#phone').blur(function() {
            var phone = $(this).val();
            //alert(user);
            $.ajax({
                url: 'http://localhost:8080/tourism-user-api/register/checkPhone',
                type:'post',
                dataType:'json',
                xhrFields: {
                    withCredentials: true
                },
                data:{phone:phone},
                //验证用户名是否可用
                success:function(data){
                    if (data.code==2004) {
                        $('#wr').removeAttr('hidden');
                        $('#ri').attr('hidden','hidden');
                        layer.msg(data.msg)

                    } else {
                        $('#ri').removeAttr('hidden');
                        $('#wr').attr('hidden','hidden');



                    }

                }
            })
        });

        //alert(email);
        $('#email').blur(function() {
            var email = $(this).val();

            //alert(email);
            $.ajax({
                url: 'http://localhost:8080/tourism-user-api/register/checkEmail',
                type:'post',
                dataType:'json',
                xhrFields: {
                    withCredentials: true
                },
                data:{email:email},
                //验证用户名是否可用
                success:function(data){
                    if (data.code==2003) {
                        $('#wr').removeAttr('hidden');
                        $('#ri').attr('hidden','hidden');
                        layer.msg(data.msg)

                    } else {
                        $('#ri').removeAttr('hidden');
                        $('#wr').attr('hidden','hidden');



                    }

                }
            })
        });

        // you code ...
        //邮箱格式
        $('#email').blur(function() {
            var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if(!($('#email').val().match(reg))){
                //layer.msg('请输入合法密码');
                $('#email').removeAttr('hidden');
                $('#er').attr('hidden','hidden');
                layer.msg('邮箱格式不正确');
            }else {
                $('#er').removeAttr('hidden');
                $('#eo').attr('hidden','hidden');
            }
        });

        //手机格式
        $('#phone').blur(function() {
            var reg = /^[1][34578]\d{9}$/;
            if(!($('#phone').val().match(reg))){
                //layer.msg('请输入合法密码');
                $('#phone').removeAttr('hidden');
                $('#pr').attr('hidden','hidden');
                layer.msg('手机格式不正确');
            }else {
                $('#pr').removeAttr('hidden');
                $('#po').attr('hidden','hidden');
            }
        });



        // 为密码添加正则验证
        $('#pwd').blur(function() {
            var reg = /^[\w]{6,12}$/;
            if(!($('#pwd').val().match(reg))){
                //layer.msg('请输入合法密码');
                $('#pwr').removeAttr('hidden');
                $('#pri').attr('hidden','hidden');
                layer.msg('请输入合法密码');
            }else {
                $('#pri').removeAttr('hidden');
                $('#pwr').attr('hidden','hidden');
            }
        });

        //验证两次密码是否一致
        $('#rpwd').blur(function() {
            var rpwd =$('#rpwd').val();
            if (rpwd==""){
                $('#rpwr').removeAttr('hidden');
                $('#rpri').attr('hidden','hidden');
                return;
            }
            if($('#pwd').val() != rpwd){
                $('#rpwr').removeAttr('hidden');
                $('#rpri').attr('hidden','hidden');
                layer.msg('两次输入密码不一致!');
            }else {
                $('#rpri').removeAttr('hidden');
                $('#rpwr').attr('hidden','hidden');
            };
        });

        //提交注册信息
        form.on("submit(form-register)", function (data) {
            var index = top.layer.msg('正在注册，请稍候', {icon: 16, time: false, shade: 0.8});
            setTimeout(function () {
                $.ajax({
                    url: 'http://localhost:8080/tourism-user-api/register/new',
                    type:'post',
                    dataType:'json',
                    xhrFields: {
                        withCredentials: true
                    },
                    data:data.field,
                    success: function (resData) {
                        if (resData.code == 2001) {

                            setTimeout(function () {
                                window.location.href = "login.html";
                            },800 );
                            layer.msg(resData.msg, {
                                icon: 1,
                                time: 1000
                            });
                        }else{
                            top.layer.close(index);
                            layer.msg(resData.msg, {
                                icon: 0,
                                time: 1000
                            })
                            return false;
                        }
                        return false;
                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert('系统错误');
                    }

                });
            }, 1000);
            return false;

        });

    });
</script>
</body>

</html>
